<link rel="stylesheet" type="text/css" href="__static__/css/login/normalize.css" />
<link type="text/css" rel="stylesheet" href="__static__/css/login/style.css" />

<header class="default-header">
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <img src="__static__/img/logo.png" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end align-items-center" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li><a  href="/index.php/admin/index/index">Home首页</a></li>
                    <li><a href="/index.php/admin/index/index#news">News新闻</a></li>
                    <li><a href="/index.php/admin/index/index#travel">Travel旅游</a></li>
                    <li><a href="/index.php/admin/index/index#fashion">fashion时尚</a></li>
                    <li><a href="/index.php/admin/index/index#team">team团队</a></li>

                    <!-- Dropdown -->
                    <li class="dropdown">
                        <a class="dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                            Pages详情
                        </a>
                        <div class="dropdown-menu">
                            <!--<a class="dropdown-item" href="#" onclick="generic()">Single时尚</a>-->
                            <!--<a class="dropdown-item" href="#" onclick="searcha()">Search查询</a>-->
                            <a class="dropdown-item" href="#" onclick="write_blog()">Write写博客</a>
                            {if condition ='$user eq 0'}
                            <a class="dropdown-item" id="tc" onclick="tc()" href="#" >login登录</a>
                            {/if}
                            {if condition ='$user neq 0'}
                            <a class="dropdown-item" href="#" onclick="person()">Personal个人中心</a>
                            <a class="dropdown-item" href="#" onclick="logout()">logout退出</a>
                            {/if}
                        </div>
                    </li>
                    {if condition ='$user neq 0'}
                    <li>
                        <img style="width: 20px;height: 20px;border-radius: 100%" src="/{$user.img}">
                    </li>
                    <li><a href="#" onclick="admin_archive({$user.id})">{$user.username}</a></li>
                    {/if}
                </ul>
            </div>
        </div>
    </nav>
</header>

<div id="gray"></div>
<div class="popup" id="popup">
    <div class="top_nav" id='top_nav'>
        <div align="center">
            <span>登录账号</span>
            <a class="guanbi"></a>
        </div>
    </div>
    <div class="min">
        <div class="tc_login">
            <div class="left">
                <h4 align="center">手机扫描</h4>
                <div align="center"><img src="__static__/images/erweima.jpg" width="150" height="150" /></div>
                <dd>
                    <div align="center">扫描二维码登录</div>
                </dd>
            </div>
            <div class="right">
                <form method="POST" name="form_login" target="_top">
                    <div align="center">
                        <a href="">短信快捷登录</a>
                        <i class="icon-mobile-phone"></i>
                        <input type="text" name="name" id="username" required="required" placeholder="用户名" autocomplete="off" class="input_yh">
                        <input type="password" name="pass" id="password" required="required" placeholder="密码" autocomplete="off" class="input_mm">
                    </div>
                    <dd>
                        <div align="center"><a href="">遇到登录问题</a></div>
                    </dd>
                    <div align="center">
                        <input type="submit" id="login" class="button" title="Sign In" value="登录">
                    </div>
                </form>
                <dd>
                    <div align="center"><a href="../../admin/login/register">立即注册</a></div>
                </dd>
                <hr align="center" />
                <div align="center">期待更多功能 </div>
            </div>
        </div>
    </div>
</div>

<script src="__static__/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script language="javascript" src="__static__/js/user/user_login.js"></script>
<script>
    $(function () {
        $('#login').click(function () {
            var username = $('#username').val();
            var password = $('#password').val();
            $("#gray").hide();
            $("#popup").hide();
            userLogin(username,password);
        })
    })

    //窗口效果
    //点击登录class为tc 显示
    function tc() {
        $("#gray").show();
        $("#popup").show();//查找ID为popup的DIV show()显示#gray
        tc_center();
    }

    //点击关闭按钮
    $("a.guanbi").click(function(){
        $("#gray").hide();
        $("#popup").hide();//查找ID为popup的DIV hide()隐藏
    })

    //窗口水平居中
    $(window).resize(function(){
        tc_center();
    });

    function tc_center(){
        var _top=($(window).height()-$(".popup").height())/2;
        var _left=($(window).width()-$(".popup").width())/2;

        $(".popup").css({top:_top,left:_left});
    }


</script>

<script type="text/javascript">
    $(document).ready(function(){

        $(".top_nav").mousedown(function(e){
            $(this).css("cursor","move");//改变鼠标指针的形状
            var offset = $(this).offset();//DIV在页面的位置
            var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
            var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离
            $(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件

                $(".popup").stop();//加上这个之后

                var _x = ev.pageX - x;//获得X轴方向移动的值
                var _y = ev.pageY - y;//获得Y轴方向移动的值

                $(".popup").animate({left:_x+"px",top:_y+"px"},10);
            });

        });

        $(document).mouseup(function() {
            $(".popup").css("cursor","default");
            $(this).unbind("mousemove");
        });
    })
</script>

